<template>
  <div id="que-bank" v-loading="loading" element-loading-text="努力拉取题库中...">
    <el-row :gutter="20" v-show="$route.name==='questionBank'">
      <m-card v-for="i in queBank" :span="12"
              :to="i.questionNumber!=='0'&&{name:'answer',params:{queBankId:i.ID}}">
        <h1 class="qb-title">{{i.TK_NAME}}</h1>
        <time>{{i.CREATE_TIME}}</time>
        <div class="corner-mark">
          <span>{{i.questionNumber}}</span>
        </div>
        <el-button type="text">开始做题</el-button>
      </m-card>
    </el-row>
    <router-view/>
  </div>
</template>

<script>
  import {mapActions, mapState} from "vuex";

  export default {
    name: "questionBank",
    props: ['subId'],
    data() {
      return {
        loading: false
      }
    },
    async beforeRouteUpdate(to, from, next) {
      if (to.name === 'answer')
        await this.getTopic(to.params.queBankId)
      next()
    },
    created() {
      this.loading = true
      this.getQueBank(this.subId).finally(() => this.loading = false)
    },
    computed: {
      ...mapState({
        queBank: state => state.queBank
      }),
    },
    methods: {
      ...mapActions(['getTopic', 'getQueBank'])
    },
  }
</script>

<style scoped>
  #que-bank {
    height: 100%;
  }

  [class*='el-col'] {
    padding: 10px;
  }

  .el-card button {
    /*display: none;*/
    float: right;
    padding: 0;
    transition: all .2s;
    transform: translate(200px, 0);
  }

  .el-card:hover button {
    display: block;
    transform: translate(0, 0);
  }

  #que-bank >>> .el-card:hover {
    transform: translate(0, -10px);
  }

  .qb-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .corner-mark {
    position: absolute;
    top: 0;
    right: 0;
    background: #409EFF;
    color: white;
    width: 80px;
    height: 80px;
    transform: rotate(45deg) translate(0px, -62px);
  }

  .corner-mark span {
    display: block;
    position: absolute;
    bottom: 5px;
    left: 0;
    right: 0;
    text-align: center;
  }
</style>
